<template>
<section v-loading="loading">
   <!-- 查询框 -->
   <div class="searchbox">
      <el-form :inline="true" :model="query" class="demo-form-inline fl">
         <el-form-item>
            <el-input v-model="query.user_name" placeholder="评价人" size="medium"></el-input>
         </el-form-item>
         <el-form-item>
            <el-select v-model="query.obj_table" placeholder="评价对象" size="medium">
               <el-option label="全部" value=""></el-option>
               <el-option label="驾校" value="jiaxiaoinfo"></el-option>
               <el-option label="教练" value="user"></el-option>
            </el-select>
         </el-form-item>
         <el-form-item>
            <el-select v-model="query.star" placeholder="评论星级" size="medium">
               <el-option label="全部" value=""></el-option>
               <el-option label="一星" value="1"></el-option>
               <el-option label="二星" value="2"></el-option>
               <el-option label="三星" value="3"></el-option>
               <el-option label="四星" value="4"></el-option>
               <el-option label="五星" value="5"></el-option>
            </el-select>
         </el-form-item>
         <el-form-item>
            <el-button type="primary" size="small" @click="getData" icon="el-icon-search">搜&nbsp;&nbsp;索</el-button>
         </el-form-item>
      </el-form>
   </div>
   <!-- 主体内容 -->
   <div @contextmenu="$parent.addMenu([{name:'刷新评论',method:'getData',icon:'icon-shuaxin'}])">
   <el-table ref="multipleTable" :data="listData" tooltip-effect="dark" style="text-align:center">
      <el-table-column prop="user_name" label="评价人"></el-table-column>
      <el-table-column prop="real_name" label="被评者"></el-table-column>
      <el-table-column label="评论星级">
         <el-rate slot-scope="scope" v-model="scope.row.star|parseInt" disabled></el-rate>
      </el-table-column>
      <el-table-column prop="content" label="评价内容"></el-table-column>
      <el-table-column label="发表时间">
         <template slot-scope="scope">{{ scope.row.time|date('Y-m-d H:i') }}</template>
      </el-table-column>
      <el-table-column label="状态">
         <template slot-scope="scope">
            <font v-if="scope.row.status==1" color="#67C23A">已审核</font>
            <font v-else-if="scope.row.status==2" color="#F56C6C">未通过</font>
            <font v-else-if="scope.row.status==0">待审核</font>
         </template>
      </el-table-column>
      <el-table-column label="操作">
         <template slot-scope="scope">
            <div @click="dialog(scope.row)" style="color:#67C23A;cursor:pointer">审核</div>
         </template>
      </el-table-column>
   </el-table>
   <!-- 分页 -->
   <div class="breakpage" v-if="page.total>0">
      <el-pagination layout="total, prev, pager, next" background :current-page="parseInt(page.curpage)"
         :page-size="parseInt(page.pagesize)" :total="parseInt(page.total)" @current-change="handleCurrentChange" >
      </el-pagination>
   </div>
  </div>
   <!-- ↓↓编辑弹窗↓↓ -->
   <el-dialog title="评论审核" :visible.sync="editVisible" width="600px">
      <el-form :model="edit" label-width="100px">
         <el-form-item label="评论内容">
            <el-input type="textarea" :rows="3" v-model="edit.content"></el-input>
         </el-form-item>
         <el-form-item label="状态">
            <el-radio-group v-model="edit.status">
               <el-radio label="0">待审核</el-radio>
               <el-radio label="1">已审核</el-radio>
               <el-radio label="2">未通过</el-radio>
            </el-radio-group>
         </el-form-item>
      </el-form>
      <div slot="footer">
         <el-button size="small" @click="editVisible=false">取 消</el-button>
         <el-button size="small" type="primary" @click="update">确 定</el-button>
      </div>
   </el-dialog>
   <!-- ↑↑编辑弹窗↑↑ -->
</section>
</template>

<script>
import * as api from '../api/index'
import { date } from '../lib/function';
export default {
   name: 'comment',
   data() {
      return {
         m: 'comment',
         query: {}, //搜索数据
         multipleSelection: [],
         editVisible:false,
         edit:{},
      }
   },
   computed: {
      listData() {
         return this.$store.state[this.m].data;
      },
      page() {
         return this.$store.state[this.m].page;
      },
      loading() {
         return this.$store.state[this.m].loading;
      }
   },
   methods: {
      getData() { //更新列表数据
         this.$store.dispatch(
            this.m + '/getData',
            JSON.parse(JSON.stringify(this.query))
         );
      },
      dialog(row){
         this.editVisible = true;
         this.edit = JSON.parse(JSON.stringify(row));
      },
      update(){
         let _this = this;
         api.comment.update(_this.edit, res => {
            if (res.status == 1) {
               _this.getData();
               _this.editVisible = false;
            }
            else _this.$message(res);
         });
      },
      handleCurrentChange(p){
         this.query.p = p;
         this.getData();
      },
   },
   filters: {
      date
   },
   created() {
     if(this.$parent.school.current.id==undefined||this.$store.state[this.m].school_id!=this.$parent.school.current.id) {
       this.query={};
       this.getData();
       this.$store.commit(this.m+'/update',{type:'school_id',data:this.$parent.school.current.id});
     }else{
       this.query=JSON.parse(JSON.stringify(this.$store.state[this.m].query));
     }
   }
}
</script>
